<template>
    <div>
        <el-dialog title="详情" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-form :model="ruleForm"  ref="Form" class="demo-ruleForm">
                
                <div class="text">
                    <div class="tt">项目ID</div>
                    <div class="tt1">{{ruleForm.project_id}}</div>
                </div>
                <div class="text">
                    <div class="tt">广告名称</div>
                    <div class="tt1">{{ruleForm.promotion_name}}</div>
                </div>
                <div class="text">
                    <div class="tt">广告评论</div>
                    <div class="tt1">
                        <el-button type="primary" v-if="ruleForm.is_comment_disable =='ON'" size="mini">启用</el-button>
                        <el-button type="danger" v-if="ruleForm.is_comment_disable =='OFF'" size="mini">不启用</el-button>
                    </div>
                </div>
                <div class="text">
                    <div class="tt">预算(元)</div>
                    <div class="tt1">{{ruleForm.budget}}</div>
                </div>
                <div class="text">
                    <div class="tt">预算类型</div>
                    <div class="tt1">
                        <el-button v-if="ruleForm.budget_mode =='BUDGET_MODE_INFINITE'" size="mini">不限</el-button>
                        <el-button type="primary" v-if="ruleForm.budget_mode =='BUDGET_MODE_DAY'" size="mini">日预算</el-button>
                        <el-button type="success" v-if="ruleForm.budget_mode =='BUDGET_MODE_TOTAL'" size="mini">总预算</el-button>
                    </div>
                </div>
                <div class="text">
                    <div class="tt">广告状态</div>
                    <div class="tt1">
                        <el-button v-if="ruleForm.status =='NOT_DELETED'||ruleForm.status =='ALL'" size="mini">不限</el-button>
                        <el-button v-if="ruleForm.status =='OK'" size="mini">投放中</el-button>
                        <el-button v-if="ruleForm.status =='DELETED'" size="mini">已删除</el-button>
                        <el-button v-if="ruleForm.status =='PROJECT_OFFLINE_BUDGET'" size="mini">项目超出预算</el-button>
                        <el-button v-if="ruleForm.status =='PROJECT_PREOFFLINE_BUDGET'" size="mini">项目接近预算</el-button>
                        <el-button v-if="ruleForm.status =='TIME_NO_REACH'" size="mini">未到达投放时间</el-button>
                        <el-button v-if="ruleForm.status =='TIME_DONE'" size="mini">已完成</el-button>
                        <el-button v-if="ruleForm.status =='NO_SCHEDULE'" size="mini">不在投放时段</el-button>
                        <el-button v-if="ruleForm.status =='AUDIT'" size="mini">新建审核中</el-button>
                        <el-button v-if="ruleForm.status =='REAUDIT'" size="mini">修改审核中</el-button>
                        <el-button type="danger" v-if="ruleForm.status =='FROZEN'" size="mini">已终止</el-button>
                        <el-button v-if="ruleForm.status =='AUDIT_DENY'" size="mini">审核不通过</el-button>
                        <el-button v-if="ruleForm.status =='OFFLINE_BUDGET'" size="mini">广告超出预算</el-button>
                        <el-button v-if="ruleForm.status =='OFFLINE_BALANCE'" size="mini">账户余额不足</el-button>
                        <el-button v-if="ruleForm.status =='PREOFFLINE_BUDGET'" size="mini">广告接近预算</el-button>
                        <el-button type="info" v-if="ruleForm.status =='DISABLED'" size="mini">已暂停</el-button>
                        <el-button type="info" v-if="ruleForm.status =='PROJECT_DISABLED'" size="mini">已被项目暂停</el-button>
                        <el-button v-if="ruleForm.status =='LIVE_ROOM_OFF'" size="mini">关联直播间不可投</el-button>
                        <el-button v-if="ruleForm.status =='PRODUCT_OFFLINE'" size="mini">关联商品不可投</el-button>
                        <el-button v-if="ruleForm.status =='AWEME_ACCOUNT_DISABLED'" size="mini">关联抖音账号不可投</el-button>
                        <el-button v-if="ruleForm.status =='AWEME_ANCHOR_DISABLED'" size="mini">锚点不可投</el-button>
                        <el-button type="info" v-if="ruleForm.status =='DISABLE_BY_QUOTA'" size="mini">已暂停</el-button>
                        <el-button v-if="ruleForm.status =='CREATE'" size="mini">新建</el-button>
                        <el-button v-if="ruleForm.status =='ADVERTISER_OFFLINE_BUDGET'" size="mini">账号超出预算</el-button>
                        <el-button v-if="ruleForm.status =='ADVERTISER_PREOFFLINE_BUDGET'" size="mini">账号接近预算</el-button>
                    </div>
                </div>
                <div class="text">
                    <div class="tt">点击出价/展示出价(元)</div>
                    <div class="tt1">{{ruleForm.bid?ruleForm.bid:0}}</div>
                </div>
                <div class="text">
                    <div class="tt">目标转化出价/预期成本(元)</div>
                    <div class="tt1">{{ruleForm.cpa_bid?ruleForm.cpa_bid:0}}</div>
                </div>
                <div class="text">
                    <div class="tt">深度优化出价(元)</div>
                    <div class="tt1">{{ruleForm.deep_cpabid?ruleForm.deep_cpabid:0}}</div>
                </div>
                <div class="text">
                    <div class="tt">深度转化ROI系数</div>
                    <div class="tt1">{{ruleForm.roi_goal?ruleForm.roi_goal:0}}</div>
                </div>
                <div class="text">
                    <div class="tt">广告创建时间</div>
                    <div class="tt1">{{ruleForm.promotion_create_time}}</div>
                </div>
                <div class="text">
                    <div class="tt">广告更新时间</div>
                    <div class="tt1">{{ruleForm.promotion_modify_time}}</div>
                </div>
                
                <div style="height:20px;width: 100%;"></div>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    name: 'detail',
    data() {
        return {
            dialogVisible: false,
            ruleForm:'',
        }
    },
    created() {
    },
    mounted() {

    },
    methods: {
        handleClose(){
            this.dialogVisible = false 
        },
        open(res) {
            this.ruleForm = JSON.parse(JSON.stringify(res))
            this.dialogVisible = true 
        },
    }
}
</script>
<style lang="scss" scoped>
    .text{
        width: 50%;
        padding: 0 20px;
        padding-right: 35px;
    }
    .text:nth-child(2n){
        padding-right:20px;
        padding-left: 35px;
    }
    .demo-ruleForm{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .tt{
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        margin-bottom: 15px;
        color: rgba(0,0,0,0.4);
    }
    .tt1{
        font-size: 14px;
        margin-bottom: 20px;
        color: rgba(0,0,0,0.9);
    }
    .el-select{
        width: 100%;
    }
    .el-date-editor{
        width: 100%;
    }
    .heng{
       position: absolute;
       bottom: 80px;
       width: 100%;
        margin-left: -20px;
        height: 1px;
        background-color: #eee;
    }
    .foot{
        width: 100%;
        margin-top: 20px;
        text-align: right;
    }
</style>
  